<template>
  <el-drawer v-model="drawerFlag" direction="rtl" @close="handleClickBtnCancel(formRef)">
    <template #header>用户</template>
    <template #default>
      <el-form ref="formRef" :model="user" :rules="rules" label-width="120px">
        <!-- 隐藏的用户 ID 字段 -->
        <el-form-item label="用户 ID" prop="id">
          <el-input v-model="user.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="user.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="user.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="user.role_id" placeholder="请选择角色">
            <el-option v-for="item in userRoleList" :label="item.role_name" :value="item.role_id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClickBtnCancel(formRef)">取消</el-button>
        <el-button type="primary" @click="handleClickBtnSubmit(formRef)">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import Dal from '@/dal'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { useDictStore } from '@/stores'

const drawerFlag = ref(false)
const userRoleList = ref(useDictStore().getRoles())
const formRef = ref<FormInstance>()
const emits = defineEmits(['submitSuccessed'])
const user = reactive({
  id: 0,
  username: '',
  email: '',
  phone: '',
  nickname: '',
  role: '普通用户',
  role_id: null,
})
const rules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: ['blur', 'change'] },
  ],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
})

const handleClickBtnCancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  drawerFlag.value = false
}

const handleClickBtnSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid: any) => {
    if (valid) {
      // 这里可以添加提交表单数据到后端的逻辑
      let res: any = {}
      if (user.id === 0) {
        res = await Dal.Users.save(user)
      } else {
        res = await Dal.Users.update(user)
      }

      console.log('表单数据：', user)
      console.log('res', res)
      // 假设提交成功后给用户提示
      ElMessage({
        message: '提交成功',
        type: 'success',
      })
      emits('submitSuccessed')
    } else {
      console.log('表单验证失败')
    }
  })

  drawerFlag.value = false
}

const open = (val: any) => {
  Object.assign(user, val || { id: 0, username: '', email: '', phone: '', nickname: '', role: '普通用户', role_id: null })
  drawerFlag.value = true
}

defineExpose({
  open,
})
</script>
